<template>
  <div class="butR">
      <h1>订单管理</h1>
    <el-button @click="dialogVisiblel">新增数据</el-button>
    <div class="xian"></div>
    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      height="450"
      style="width: 100%"
    >
      <el-table-column label="Date" prop="date"> </el-table-column>
      <el-table-column label="Name" prop="name"> </el-table-column>
      <el-table-column label="Age" prop="age"> </el-table-column>
      <el-table-column label="Site" prop="address"> </el-table-column>

      <el-table-column align="right">
        <template slot="header" slot-scope="{}">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增数据 -->
    <el-dialog
      title="新增数据"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="姓名">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="formLabelAlign.type"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisiblee">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
        dialogVisibleql:false,
      // 弹框
      dialogVisible: false,
      //   新增框
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
        date1: "",
      },
      formLabelAlignTwo: {
        name: "",
        region: "",
        type: "",
        date1: "",
      },
      tableData: [
        {
          date: "2016/5/2",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          age: 23,
        },
        {
          date: "2016/5/4",
          name: "王发发",
          address: "上海市普陀区金沙江路 1517 弄",
          age: 23,
        },
        {
          date: "2016/5/1",
          name: "唐发发",
          address: "上海市普陀区金沙江路 1519 弄",
          age: 23,
        },
        {
          date: "2016/5/3",
          name: "王老虎",
          address: "上海市普陀区金沙江路 1516 弄",
          age: 23,
        },

        {
          date: "2016/5/3",
          name: "王老六",
          address: "上海市普陀区金沙江路 1516 弄",
          age: 23,
        },
        {
          date: "2016/5/4",
          name: "王发发",
          address: "上海市普陀区金沙江路 1517 弄",
          age: 23,
        },
        {
          date: "2016/5/1",
          name: "唐发发",
          address: "上海市普陀区金沙江路 1519 弄",
          age: 23,
        }
      ],
      search: "",
    };
  },
  methods: {
    handleEdit(index, row) {
      this.dialogVisibleql=true
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.tableData.splice(index, 1);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    dialogVisiblel(){
this.dialogVisible= true
    },
    dialogVisiblee() {
        let myDate = new Date();
      if (
        this.formLabelAlign.region != "" &&
        this.formLabelAlign.name != "" &&
        this.formLabelAlign.type != ""
      ) {
        this.tableData.push({
          date: myDate.toLocaleDateString(),
          name: this.formLabelAlign.region,
          address: this.formLabelAlign.name,
          age: this.formLabelAlign.type,
        });
        this.dialogVisible= false;
        this.formLabelAlign.region='';
        this.formLabelAlign.name='';
        this.formLabelAlign.type='';
      }
    },
  },
};
</script>

<style scoped lang="scss">
.butR {
  width: 100%;
  padding: 50px;
  .xian {
    height: 20px;
    width: 100%;
    border-bottom: 1px solid #dbdbdb;
  }
  h1{
      font-size: 20px;
      font-weight: 300;
      color: #8f8f8f;
      margin-bottom: 20px;
  }
}
</style>